﻿<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>五次方的缓动曲线</title>
		<style type="text/css">
			#moveBox {
				position: relative;
				width: 500px;
				height: 50px;
				border: 3px #0C3 solid;
			}
			
			span {
				width: 50px;
				height: 50px;
				display: inline-block;
				background-color: #09C;
				position: absolute;
			}
			
			#lineBox {
				width: 500px;
				height: 200px;
				border: 2px #0C3 solid;
				position: absolute;
			}
			
			.dot {
				width: 2px;
				height: 2px;
				font-size: 0;
				background-color: #006600;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div id="moveBox"> <span id="myspan"></span> </div>
		<h1 id="lineBox"> </h1>
		<script>
			//Quint,五次方缓动曲线，quint:五胞胎，ease舒缓，in入，out出
			var Quint = {
				easeIn: function(t, b, c, d) {
					var rs = c * (t /= d) * t * t * t * t + b;
					return Math.floor(rs); //返回一个整数
				},
				easeOut: function(t, b, c, d) {
					var rs = c * ((t = t / d - 1) * t * t * t * t + 1) + b;
					return Math.ceil(rs);
				},
				easeInOut: function(t, b, c, d) {
					var rs = 0;
					if((t /= d / 2) < 1) {
						rs = c / 2 * t * t * t * t * t + b;
					} else {
						rs = c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
					}
					return Math.floor(rs);
				}
			}
			/*
			说明：以上有三个独立函数组成，每个函数就是简单的四个数的加减乘除混合运算
			t: time变化时间取值范围0-d之间，参数d是duration持续时间
			b：begin 初始状态
			c：change 变化范围
			注意：t/d 的值其实就是获取一个 0-1之间的值，这种思想我们可以借鉴。
			*/
			var fnMove = Quint.easeOut; //统一调用函数到fnMove变量，只要修改这一个地方就可以看到三个函数的变化趋势图和运动结果

			var change = 500,
				duration = 200,
				begin = 0,
				time = 0; //初始化参数
			var moveBox = document.getElementById("moveBox");
			var myspan = document.getElementById("myspan");
			var lineBox = document.getElementById("lineBox");

			//声明一个函数让小方块随时间变化进行运动
			function A() {
				time++; //其中time参数也就是t形参是不断变化的，从0边到duration
				myspan.style.left = fnMove(time, begin, change - 50, duration) + "px";
				if(time < duration)
					setTimeout(A, 1)
			}
			A();

			//------------lineBox变化趋势图，趋势图仅仅表明节奏的趋势
			//初始化参数表，通过begin参数调节起始位置，change参数调节结束位置
			var t2 = 0,
				b2 = 200,
				c2 = -200,
				d2 = 500; //趋势图
			//var t2=0,b2=0,c2=500,d2=200;    //实际值图
			var arr = [];
			for(; t2 <= d2; t2++) {
				//为对象添加一个存放缓动曲线的div
				arr.push('<div class="dot" style="left:' + (t2 - 1) + 'px;top:' + fnMove(t2, b2, c2, d2) + 'px"><\/div>');
			}
			lineBox.innerHTML = arr.join(''); //显示趋势图
		</script>
	</body>

</html>